<template>
	<view class="app-participant">
		<view v-if="ptBool">
			<app-participant-model v-model="ptBool" :pintuan_list="pintuan_list"></app-participant-model>
		</view>
		<view class="app-specification dir-left-nowrap main-between cross-center">
			<text class="app-left">支付商品开团，邀请好友参与，成功发货，失败退款</text>
			<view class="app-right">
				<app-jump-button form arrangement="row" open_type="navigate" url="/plugins/pt/specification/specification">
					<text class="app-text">详细规则</text>
					<image class="app-icon" src="../../../static/image/icon/arrow-right.png"></image>
				</app-jump-button>
			</view>
		</view>
		<view class="app-content" v-if="pintuan_list.length > 0">
			<view class="app-peo-text dir-left-nowrap main-between cross-center">
				<text>以下小伙伴正在发起拼团，您可以直接参与：</text>
				<view>
					<app-form-id @click="ptBool = true">
						<text class="app-text">查看更多</text>
						<image class="app-icon" src="../../../static/image/icon/arrow-right.png"></image>
					</app-form-id>
				</view>
			</view>
			<template v-if="pintuan_list.length === 1">
			<block v-for="(item, index) in 1" :key="index">
				<view class="app-item dir-left-nowrap main-between" >
					<view class="dir-left-nowrap cross-center">
						<image class="app-icon" :src="pintuan_list[item].group_user.user.avatar"></image>
						<text class="app-name">{{pintuan_list[item].group_user.user.nickname}}</text>
					</view>
					<view class="dir-left-nowrap cross-center">
						<view class="app-text dir-top-nowrap main-between">
							<text class="app-red">还差{{pintuan_list[item].surplus_people}}人成团</text>
							<view class="app-gray">
								<app-surplus-time :surplus_date_time="pintuan_list[item].surplus_date_time"></app-surplus-time>
							</view>
						</view>
						<view class="app-go">
							<app-jump-button form :url="`/plugins/pt/detail/detail?id=${pintuan_list[item].id}`">
								去参团
							</app-jump-button>
						</view>
					</view>
				</view>
			</block>
			</template>
			<template v-if="pintuan_list.length >= 2">
				<block v-for="(item, index) in 1" :key="index">
					<view class="app-item dir-left-nowrap main-between" >
						<view class="dir-left-nowrap cross-center">
							<image class="app-icon" :src="pintuan_list[item].group_user.user.avatar"></image>
							<text class="app-name">{{pintuan_list[item].group_user.user.nickname}}</text>
						</view>
						<view class="dir-left-nowrap cross-center">
							<view class="app-text dir-top-nowrap main-between">
								<text class="app-red">还差{{pintuan_list[item].surplus_people}}人成团</text>
								<view class="app-gray">
									<app-surplus-time :surplus_date_time="pintuan_list[item].surplus_date_time"></app-surplus-time>
								</view>
							</view>
							<view class="app-go">
								<app-jump-button form :url="`/plugins/pt/detail/detail?id=${pintuan_list[item].id}`">
									去参团
								</app-jump-button>
							</view>
						</view>
					</view>
				</block>
			</template>
		</view>
		
	</view>
</template>

<script>
	import appSurplusTime from './app-surplus_time.vue';
	import appParticipantModel from './app-participant-model.vue';
	
    export default {
        name: 'app-participant',
	    data() {
            return {
                ptBool: false,
                show: 0,
                selectAttr: {},
                attr: {}
            }
	    },
	    props: {
            pintuan_list: {
                type: Array,
	            default() {
                    return [];
	            }
            }
	    },
	   
	    components: {
            'app-surplus-time': appSurplusTime,
		    'app-participant-model': appParticipantModel,
	    }
    }
</script>

<style scoped lang="scss">
	.app-participant {
		width: #{750rpx};
		padding: 0 #{24rpx};
		background-color: white;
		.app-specification {
			height: #{80rpx};
			border-bottom: #{1rpx} solid #eeeeee;
			.app-left {
				font-size: #{24rpx};
				color: #666666;
			}
			.app-right {
				width: #{134rpx};
			}
			.app-text {
				font-size: #{24rpx};
				color: #999999;
			}
			.app-icon {
				width: #{12rpx};
				height: #{22rpx};
				margin-left: #{12rpx};
			}
		}
		.app-content {
			padding-bottom: #{20rpx};
			box-sizing: border-box;
		}
		.app-peo-text {
			font-size: #{24rpx};
			color: #666666;
			padding: #{24rpx} 0;
			box-sizing: border-box;
			.app-icon {
				width: #{12rpx};
				height: #{22rpx};
				margin-left: #{12rpx};
			}
			.app-text {
				font-size: #{24rpx};
				color: #999999;
			}
		}
		.app-item {
			height: #{100rpx};
			background-color: #f6f6f6;
			width: #{750-48rpx};
			border-bottom-left-radius: #{8rpx};
			border-top-left-radius: #{8rpx};
			margin-bottom: #{10rpx};
			.app-icon {
				height: #{80rpx};
				width: #{80rpx};
				border-radius: 50%;
				margin-left: #{20rpx};
			}
			.app-name {
				font-size: #{28rpx};
				color: #353535;
				width: #{210rpx};
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				margin-left: #{16rpx};
			}
			.app-go {
				width: #{140rpx};
				background-color: #ff5c5c;
				height: #{100rpx};
				font-size: #{24rpx};
				text-align: center;
				color: #ffffff;
				margin-left: #{36rpx};
			}
			.app-text {
				font-size: #{24rpx};
				width: #{198rpx};
				height: #{100rpx};
				text {
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
				.app-red {
					color: #ff5c5c;
					margin-top: #{14rpx};
				}
				.app-gray {
					color: #707070;
					margin-bottom: #{14rpx};
				}
			}
		}
	}
</style>